<template>
	<div>
		<!--列表-->
		<template>
			<el-table v-loading="listLoading" :data="tableData" style="width: 100%">
				<!--<el-table-column-->
								<!--type="selection"-->
								<!--width="55">-->
				<!--</el-table-column>-->
				<el-table-column v-for="item in tableTile" :prop="item.key" :label="item.name"></el-table-column>
			</el-table>
		</template>
		<!--分页-->
		<el-col :span="24" class="toolbar" style="padding-bottom:10px;">
			<el-pagination :current-page="1" :page-sizes="[5, 10, 20, 50]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400" style="float:right">
			</el-pagination>
		</el-col>
	</div>
</template>

<script>
	export default {
		props: ['type'],
		data() {
			return {
				ptype:this.type,
				tableTile:[],
				tableData: []
			}
		},
		mounted:function () {
			this.getTableTitle();
//			this.testHttp();

		},
		methods:{
			testHttp:function () {
				this.$http.get('https://cnodejs.org/api/v1/topics').then((response) => {
					// success callback
//					console.log(response.body)
				}, (response) => {
					// error callback
//					console.log(response)
				})
			},
			getTableTitle:function () {
				let tds=[];
				switch (this.ptype){
					case "hdfs":
						this.tableTile = [{
							key:'id',
							name:'ID'
						},{
							key:'directory',
							name:'目录'
						},{
							key:'usedSpace',
							name:'已用空间(TB)'
						},{
							key:'lastSpace',
							name:'剩余空间(TB)'
						},{
							key:'fileQuantity',
							name:'文件目录数'
						}]
						for(let i =0;i<8;i++){
							let obj = {
								id:i,
								directory:'c:/da/test'+i,
								usedSpace:50+i+'',
								lastSpace:69+i+'',
								fileQuantity:30003+i+''
							};
							tds.push(obj);
						}
						break
					case "yarn":
						this.tableTile = [{
							key:'id',
							name:'ID'
						},{
							key:'queue',
							name:'队列'
						},{
							key:'usedResources',
							name:'占用资源(%)'
						},{
							key:'maxResources',
							name:'最大资源(%)'
						}]
						for(let i =0;i<8;i++){
							let obj = {
								id:i,
								queue:'topic1'+i,
								usedResources:50+i+'',
								maxResources:69+i+''
							};
							tds.push(obj);
						}
						break
					case "hive":
						this.tableTile = [{
							key:'id',
							name:'ID'
						},{
							key:'db',
							name:'数据库'
						},{
							key:'dirdb',
							name:'数据库目录'
						},{
							key:'usedSpace',
							name:'使用空间(TB)'
						},{
							key:'lastSpace',
							name:'剩余空间(TB)'
						},{
							key:'tables',
							name:'表数量'
						}]
						break
					case "hbase":
						this.tableTile = [{
							key:'id',
							name:'ID'
						},{
							key:'tableSpace',
							name:'表空间'
						},{
							key:'createdTable',
							name:'已建表数量'
						},{
							key:'lastTable',
							name:'剩余建表数量'
						},{
							key:'region',
							name:'region数量'
						}]
						break
					case "kafka":
						this.tableTile = [{
							key:'id',
							name:'ID'
						},{
							key:'theme',
							name:'主题'
						},{
							key:'partition',
							name:'分区数'
						},{
							key:'backup',
							name:'备份数'
						}]
						break
				}
				this.tableData =tds;
			}
		}
	}
</script>

<style scoped>
	.toolbar .el-form-item {
		margin-bottom: 10px;
	}
	.toolbar {
		background: #fff;
		padding: 10px 10px 0px 10px;
	}
</style>